import * as Vue from './node_modules/vue3/vue.esm-browser.mjs';
import * as Element from './node_modules/element-plus/index.full.mjs';

// import ref
let {ref} = Vue;
let {watchEffect} = Vue;

let {ctxPath} = window;

let {genFileId} = Element;

const upload = ref();
const uploadMerge = ref();
const fileListMerge = ref([]);
const formDataMerge = ref(new FormData());
// 上传的地址
const uploadAction = ref(`${ctxPath}upload`);
// 下载的地址
const downloadAction = ref(`${ctxPath}download`);
const mergeAction = ref(`${ctxPath}merge`);

const fileSize = ref(40);

const uploadData = ref({fileSize: fileSize.value});

const handleSuccess = (response) => {
    let {cutFiles, originFile} = response;
    let _tableData = [];
    _tableData.push(originFile);
    cutFiles.forEach(item => {
        _tableData.push(item);
    })
    tableData.value = _tableData;
}
const handleExceed = (files) => {
    upload.value.clearFiles()
    const file = files[0];
    file.uid = genFileId()
    upload.value.handleStart(file)
}
const submitUpload = () => {
    upload.value.submit()
}
const multipleTableRef = ref()
const tableData = ref();
const handleDownloadClick = (row) => {
    let {filePath, fileName} = row;
    downloadFile(filePath, fileName);
}
const downloadFile = (filePath, fileName) => {
    let formData = new FormData();
    formData.append('path', filePath);
    fetch(downloadAction.value, {
        body: formData, method: "POST"
    })
        .then(res => res.blob())
        .then(blob => {
            let a = document.createElement('a');
            //兼容火狐，将a标签添加到body当中
            document.body.appendChild(a)
            // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
            let url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            // a标签增加target属性
            a.target = '_blank'
            a.click();
            //移除a标签
            a.remove()
            window.URL.revokeObjectURL(url);
        });
}
const downloadSelection = () => {
    multipleTableRef.value.getSelectionRows().forEach(item => {
        let {filePath, fileName} = item;
        downloadFile(filePath, fileName);
    })
}
const downloadTmp = () => {
    tableData.value.forEach(item => {
        let {filePath, fileName} = item;
        if (fileName.lastIndexOf(".tmp") !== -1) {
            downloadFile(filePath, fileName);
        }
    })
}
const downloadTmpZip = () => {
    tableData.value.forEach(item => {
        let {filePath, fileName} = item;
        if (fileName.lastIndexOf(".tmp") !== -1) {
            // 拼接成 zip
            fileName = `${fileName.split(".tmp")[0]}.zip`;
            downloadFile(filePath, fileName);
        }
    })
}

const uploadFileMerge = (file) => {
    console.log(file);
}
const submitUploadMerge = () => {
    let fileMeat = fileListMerge.value[0].name.split('_');
    let fileName = `${fileMeat[0]}.${fileMeat[1]}`;
    fileListMerge.value.forEach(item => {
        formDataMerge.value.append("files", item.raw);
    })
    fetch(mergeAction.value, {
        body: formDataMerge.value, method: "POST"
    })
        .then(res => res.blob())
        .then(blob => {
            let a = document.createElement('a');
            //兼容火狐，将a标签添加到body当中
            document.body.appendChild(a)
            // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
            let url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            // a标签增加target属性
            a.target = '_blank'
            a.click();
            //移除a标签
            a.remove()
            window.URL.revokeObjectURL(url);
        });
}

let app = Vue.createApp({
    setup() {
        watchEffect(() => {
            uploadData.value.fileSize = fileSize.value;
        })
        return {
            upload,
            handleExceed,
            submitUpload,
            uploadAction,
            uploadData,
            fileSize,
            handleSuccess,
            tableData,
            multipleTableRef,
            handleDownloadClick,
            downloadSelection,
            uploadMerge,
            uploadFileMerge,
            fileListMerge,
            submitUploadMerge,
            downloadTmp,
            downloadTmpZip
        }
    },
});

app.use(Element);

app.mount('#app');
